
<template>
    <div class="tags-set"   v-bind:class="customClass" v-bind:style="cssStyle()" >
        <div class="hd">
            {{config.title}}
            <div class="btns">
                <i class="fa fa-times pull-right fa-2x close" title="关闭" v-on:click="close()"></i>
            </div>
        </div>
        <div class="bd">
            <div class="top_left" v-bind:style="itemsHeight()">
                <div class="tag" v-for="tag in items.list">
                    <div class="tag_name">{{tag.tag_name}}</div>
                    <div class="tag_num">{{tag.count}}</div>
                    <div class="content_operate">
                        <button
                                v-bind:class="check(tag.tag_name) >= 0 ? 'cancelbtn':'selectedbtn'"
                                v-on:click="check(tag.tag_name) >= 0 ? delSelected(tag):selected(tag)" >{{check(tag.tag_name) >= 0 ? '取消' : '添加'}}</button>
                    </div>
                </div>
            </div>
            <div class="local_right" v-bind:style="itemsHeight()">
                <div class="tag" v-for="tag in selectedList">
                    <p class="tag_name">{{tag.tag_name}}</p>
                    <p class="tag_num">{{tag.count}}</p>

                    <div class="content_operate">
                        <button class="cancelbtn" v-on:click="delSelected(tag)">取消</button>
                    </div>
                </div>
            </div>

        </div>
        <div class="ft">
            <button class="" v-on:click="save()">确定</button>
            <button class="cancelbtn" v-on:click="close()">取消</button>
        </div>
    </div>
</template>


<script>
    import fn from 'admin/js/common/function.js';

    export default {
        data: function(){
            return {
                config: {
                    title: '请稍等...',
                    content: '',
                    style: {
                        left: 100,
                        top: 30,
                        width: 150,
                        height: 'auto'
                    },
                    customClass: ''	//自定义样式
                },
                params: {
                    itemId: 0
                },
                items: {
                    loading: true,
                    total : 0,
                    list : []
                },
                selectedList: [],
                height: 0
            }
        },
        methods: {
            close(){
                $('.tags-set').remove();
                this.$emit("show-coverq",false);
            },
            select_id(s_id,item){
                this.params.catIds = s_id;
                this.queryItems();
            },
            _get_left(){
                this.config.style.width = this.config.style.width.toString() || '68%';

                //百分数方法
                if(this.config.style.width.lastIndexOf('%') != -1){
                    this.config.style.left = ((100 - parseInt(this.config.style.width.substr(0,this.config.style.width.length-1))) / 2) + '%' ;
                }else{
                    this.config.style.left = (($(window).width() - parseInt(this.config.style.width)) / 2);
                }

            },
            cssStyle(){
                return fn.makeStyle(this.config.style);
                //return null;
            },
            customClass(){
                return null;
            },
            itemsHeight(){
                //动态修正高度 600  480  360
                if($(window).height() <=650) {
                    return {height:'360px'};
                }

                if($(window).height() <=750) {
                    return {height:'480px'};
                }

                if($(window).height() > 750) {
                    return {height:'600px'};
                }

            },
            selected(tag){
                this.selectedList.push(tag);
            },
            delSelected(tag){
                var ii = _.find(this.selectedList,{'tag_name':tag.tag_name});
                var index = this.selectedList.indexOf(tag);
                this.selectedList.splice(index, 1);
            },
            save(){
                var self = this;

                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.setTags,
                    dataType: 'json',
                    data: {
                        'item_id': self.params.itemId,
                        'tags': JSON.stringify(self.selectedList)
                    },
                    error: function (error) {
                    },
                    success: function (response) {
                        if (response.err) {

                        } else {
                            //console.log(response.date);
                            self.$emit("tags-change",JSON.stringify(self.selectedList));
                            self.close();
                        }
                    }
                });
            },
            check(tag_name){
                var index =  _.findIndex(this.selectedList, function(o) {
                    return o.tag_name == tag_name;
                });
                return index;
            },
            queryTopItems(){
                var self = this;
                //取TOP
                $.ajax({
                    type: 'POST',
                    url: CFG.api.top.getTags,
                    dataType: 'json',
                    data: self.params,
                    error: function (error) {
                    },
                    success: function (response) {
                        if (response.err) {

                        } else {
                            self.items.total = response.data.total;
                            self.items.list = response.data.list;
                        }
                    }
                });
            }
        },
        created (){
            var self = this;

            //动态修正高度
            if($(window).height() <= 650) {
                this.params.pageSize = 3;
            }

            if($(window).height() <= 750) {
                this.params.pageSize = 5;
            }

            if($(window).height() > 750) {
                this.params.pageSize = 7;
            }


            this.$nextTick(function(){
                $.extend(true,self.$data, self.temp);
                self._get_left();
                self.queryTopItems();

                //取本地已选
                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.getRates,
                    dataType: 'json',
                    data:{
                        itemId: self.params.itemId
                    },
                    error: function (error) {
                    },
                    success: function (response) {
                        if (response.err) {
                        } else {
                            self.selectedList = response.data.tags;
                        }
                    }
                });
            })

        },
        components: {
        }
    }
</script>

<style lang="less">
    .tags-set {
        position:fixed;
        top:10px;
        _position:absolute;
        min-height:50px;
        _height:50px;
        opacity: 0.9;
        z-index: 200;
        background-color:#ccc;
        border-radius: 4px;

        input {
            width: 100px;
        }

        hr {
            margin: 10px 0;
            border: 0;
            border-top: 1px solid #242424;
            border-bottom: 1px solid #404040;
        }

        .hd {
            display: flex;
            justify-content:  space-between;
            height:30px;
            line-height: 30px;
            vertical-align: middle;
            padding:0 5px;
            border-bottom: 1px solid #242424;
            border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        }

        .bd {
            display: flex;
            padding: 5px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            min-height: 30px;
            max-height: 670px !important;

            .tag {
                display: flex;
                justify-content: space-between;
                background-color: #eee;
                margin-bottom: 5px;
                padding: 3px 5px;
                border-radius: 4px;
                border: 1px solid #bfcbd9;

                .tag_name {
                    width:200px;
                }

                .tag_num {
                    width:100px;
                }

            }

            .top_left {
                width: 50%;
                border-right: 1px solid rgba(0, 0, 0, 0.4);

                .content_list {
                    padding-right: 5px;
                }
            }

            .local_right {
                width: 50%;
                padding-left: 5px;
                overflow: auto;
            }
        }

        .ft {
            vertical-align: middle;
            padding:2px 5px;
            text-align: center;
            border-top: 1px solid #242424;
            border-top: 1px solid rgba(0, 0, 0, 0.4);
        }


    }

</style>
